<template>
  <div class="job-content">
    <Container
      padding-left="3.125vw"
      padding-right="3.125vw"
      padding-top="0"
      padding-bottom="0"
    >
      <NavPanel
        :activeId="navActiveId"
        :data="navPanelData"
        @item-click="navPanelItemClick"
      />
      <Container padding="0 15.625vw">
        <InputAddressSearch
          country
          :profession="professionVisible"
          @search="inputSearch"
          @select-city="inputSelectCity"
          v-model="listParams.title"
        ></InputAddressSearch>
        <PositionApplyVue
          @consult="clickConsult"
          :data="positionData"
          v-if="navActiveId == 1"
        />
        <template v-else>
          <TableCollapse
            :data="listTableList"
            colEndWidth="8.3333vw"
            @clickEndCol="clickConsult"
          />
          <ShowMore
            :totalCount="listParams.total"
            v-model:currentPage="listParams.page"
            v-model:pageSize="listParams.rows"
            @change="getTalentListData"
          ></ShowMore>
        </template>
      </Container>
    </Container>

    <!-- 咨询弹窗 -->
    <DialogService
      :submit_id="submit_id"
      ref="dialogServiceRef"
    ></DialogService>
    <DialogMobileService
      :submit_id="submit_id"
      ref="dialogMobileServiceRef"
    ></DialogMobileService>
  </div>
</template>

<script setup lang="ts">
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { postTalentCategory, postTalentList } from "../../../api/talent";
import { useRoute } from "vue-router";
import { useCacheStore, useGlobalStore, useMemberStore } from "../../../store";
import PositionApplyVue from "./PositionApply.vue";
import { message } from "ant-design-vue";

const $t = getCurrentInstance()!.appContext.config.globalProperties.$t;

const route = useRoute();

const globalStore = useGlobalStore();
const cacheStore = useCacheStore();
const memberStore = useMemberStore();

// 提交咨询
const dialogServiceRef = ref();
const dialogMobileServiceRef = ref();
const submit_id = ref();
const clickConsult = (item: any) => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  submit_id.value = item.id;
  nextTick(() => {
    if (isMobile()) {
      dialogMobileServiceRef.value.show();
    } else {
      dialogServiceRef.value.show();
    }
  });
};

const navActiveId = ref(1);
const navPanelData = ref();
const navCurrentIndex = ref(0);
const getNavPanelData = async () => {
  let res = await postTalentCategory();
  navPanelData.value = res.data.map((item) => {
    return {
      ...item,
      label: item.title,
      value: item.id,
    };
  });
  getTalentListData();
};

const inputSearch = (value: string) => {
  getTalentListData();
};
const inputSelectCity = (value: any) => {
  listParams.city_id = value.id;
  getTalentListData();
};

const professionVisible = ref(false);
const navPanelItemClick = (item: any, index: number) => {
  if (index == 0) {
    professionVisible.value = false;
  } else {
    // professionVisible.value = true;
    professionVisible.value = true;
  }
  listParams.city_id = "";
  listParams.title = "";
  navCurrentIndex.value = index;
  cacheStore.navPanelData.job.index = index;
  getTalentListData();
};

let listParams = reactive({
  cat_id: "",
  city_id: "",
  title: "",
  rows: 10,
  page: 1,
  total: 0,
});

const positionData = ref();
const getTalentListData = async () => {
  listTableList.value.items = undefined;
  positionData.value = undefined;
  navActiveId.value = navPanelData.value[navCurrentIndex.value].type_id;
  listParams.cat_id = navPanelData.value[navCurrentIndex.value].id;
  const { total, ...params } = listParams;
  let res = await postTalentList(params);
  if (res.code === 200) {
    listParams.total = res.data.total;
    positionData.value = res.data.data;
    let items = res.data.data.map((item) => {
      return {
        id: item.id,
        col_1: {
          value: item.hangye,
        },
        col_2: {
          value: item.zhiye,
        },
        col_3: {
          value: item.quyu,
        },
        details: item.content,
      };
    });
    listTableList.value.items = items;
  } else {
    listTableList.value.items = [];
    positionData.value = [];
  }
};

const listTableList = ref<{
  headers: any[];
  items?: any[] | undefined;
}>({
  headers: [],
  items: undefined,
});
const getSimpleCourseHeaders = () => {
  listTableList.value.headers = [
    {
      title: "table.talent.col_1",
      width: "14.5313vw",
    },
    {
      title: "table.talent.col_2",
      flex: "1",
    },
    {
      title: "table.talent.col_3",
      width: "12.5vw",
    },
  ];
};
getNavPanelData();

getSimpleCourseHeaders();
</script>
<style scoped lang="less"></style>
